<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Canvas Five-pointed Star</title>
  </head>
  <body>
    <canvas id="starCanvas" width="1000" height="1000"></canvas>
    <script>
      // 获取canvas元素及其绘图上下文
      var canvas = document.getElementById("starCanvas");
      var ctx = canvas.getContext("2d");

      ctx.beginPath();
      //   1.
      ctx.moveTo(100, 100);
      ctx.lineTo(200, 100);
      //   2.
      ctx.moveTo(200, 100);
      ctx.lineTo(120, 180);
      // 3.
      ctx.moveTo(120, 180);
      ctx.lineTo(150, 50);
      // 4.
      ctx.moveTo(150, 50);
      ctx.lineTo(180, 180);
      // 5.
      ctx.moveTo(180, 180);
      ctx.lineTo(100, 100);
      ctx.fillStyle = "yellow"; // 填充颜色
      ctx.lineWidth = 2; // 线条宽度
      ctx.strokeStyle = "pink"; // 线条颜色

      ctx.stroke();
    </script>
  </body>
</html>
